<template>
  <view class="container">
    <view class="maxImage">
      <van-icon class="maxIcon" name="arrow-left" @click="maxIcon" />
      <image class="Image" :src="userInfoItem.avatar" mode="aspectFill"></image>
      <view class="maxback"></view>
    </view>

    <view class="userInfo">
      <!-- 自我介绍 -->
      <view class="padding_left_right my_pet_user_box">
        <view class="my_pet_user_box_left1">
          <image class="image" :src="userInfoItem.avatar" mode="aspectFill"></image>
          <view class="my_pet_user_title">
            <h1>{{userInfoItem.name}}</h1>
            <block>
              <van-field v-if="query.userId != userInfo.id" readonly :value="userInfoItem.remarks" maxlength="15"
                placeholder="欢迎来到奇宠社区 ~" />
              <view v-else class="my_pet_user_title_input">
                <van-field :value="userInfoItem.remarks" maxlength="15" placeholder="乘风破浪会有时，云帆济沧海"
                  @blur="usernameBlur" />
                <image class="minImage" src="/static/images/mine/edit.png" mode="aspectFill"></image>
              </view>
            </block>
          </view>
        </view>
        <view class="my_pet_user_box_right" v-if="query.userId != userInfo.id">
          <view :class="!userInfoItem.isFollowed?'attention1' : 'attention'" @click="onfollowed">
            {{!userInfoItem.isFollowed? '未关注' : '已关注'}}
          </view>
        </view>
      </view>
      <!-- 性别 -->
      <image class="gender_Info" src="/static/images/mine/nan.png" mode="aspectFill"></image>
      <!-- 粉丝以及关注列表 -->
      <view class="community">
        <view class="community_box">
          <h1>{{userInfoItem.followers}}</h1>
          <text>关注</text>
        </view>
        <view class="community_box">
          <h1>{{userInfoItem.followeds}}</h1>
          <text>粉丝</text>
        </view>
        <view class="community_box">
          <h1>{{userInfoItem.likes}}</h1>
          <text>获赞</text>
        </view>
      </view>

      <van-tabs animated swipeable :active="Myactive" @change="onChangeMyactive">
        <van-tab title="关于Ta">
          <view class="Myactive_box padding_left_right">
            <userMaomao :getRecordItem="petInfoItem" :userId="query.userId"></userMaomao>
            <!-- 我加入的圈子 -->
            <userCircle :getcircleItem="circleInfoItem" :userId="query.userId" @onJoinerShow="onJoinerShow">
            </userCircle>
          </view>
        </van-tab>
        <van-tab title="文章">
          <view class="Myactive_box padding_left_right" v-show="Myactive == 1">
            <!--  -->
            <view class="Myactive_box_flex">
              <view class="article_box" v-for="(item,i) in articleItem" :key="i"
                @click="navTo('/subpkg/details/details?id=' + item.id)">
                <view class="article_box_img">
                  <image :src="item.sliderImgs[0]" mode="aspectFill"></image>
                </view>
                <view class="article_box_title">
                  {{item.title}}
                </view>
                <view class="article_box_give">
                  <view class="article_box_give_left">
                    {{item.views}}人浏览
                  </view>
                  <view class="article_box_give_right">
                    <image class="minImage" src="/static/give.png" mode="widthFix"></image>
                    {{item.likes}}
                  </view>
                </view>
              </view>
            </view>

            <view class="Myactive_box_no" v-if="articleItem.length == 0">
              <image src="http://qichong-1256206693-1256206693.cos.ap-nanjing.myqcloud.com/upload/20210617/59156162f3ceb0cd81ba5c50a6c38dd5.png" mode="aspectFill"></image>
              <text>还没发布任何文章，快去发表一篇吧！</text>
            </view>

          </view>
        </van-tab>
        <van-tab title="动态">
          <view class="Myactive_box padding_left_right" v-show="Myactive == 2">
            <block v-for="(item,i) in articleItem" :key="i">
              <userIntroduced :articleShow="false" :attentionShow="false" :conditionItem="item"
                @onlikeShow="onlikeShow" @onremoveShow="onremoveShow">
              </userIntroduced>
            </block>
            <view class="Myactive_box_no Myactive_box_no1" v-if="articleItem.length == 0">
              <image src="http://qichong-1256206693-1256206693.cos.ap-nanjing.myqcloud.com/upload/20210617/59156162f3ceb0cd81ba5c50a6c38dd5.png" mode="aspectFill"></image>
              <text>还没发布任何动态，快去发表一篇吧！</text>
            </view>
          </view>
        </van-tab>
        <van-tab title="喜欢">
          <view class="Myactive_box padding_left_right" v-show="Myactive == 3">
            <!-- 瀑布流布局列表 -->
            <view class="pubuBox">
              <view class="pubuItem">
                <view class="item-masonry" v-for="(item, i) in articleItem" :key="i"
                  @click="navTo('/subpkg/details/details?id=' + item.id)">
                  <image v-if="item.articleType == 0" class="article_box_img_i" :src="item.sliderImgs[0]"
                    mode="aspectFill"></image>
                  <image v-if="item.articleType != 0" class="article_box_img_i1" :src="item.sliderImgs[0]"
                    mode="aspectFill"></image>
                  <view class="listtitle">
                    <!-- 这是没有高度的父盒子（下半部分） -->
                    <view class="listtitle1" v-if="item.articleType != 1">{{ item.postsContent }}</view>
                    <view class="listtitle1" v-if="item.articleType == 1">{{ item.title }}</view>
                    <view class="article_box_give">
                      <view class="article_box_give_left">
                        {{item.views}}人浏览
                      </view>
                      <view class="article_box_give_right">
                        <image v-if="!item.isLiked" class="minImage" src="/static/give.png" mode="widthFix"></image>
                        <image v-else class="minImage" src="/static/give_active.png" mode="widthFix"></image>
                        {{item.likes}}
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>

            <view class="Myactive_box_no" v-if="articleItem.length == 0">
              <image src="http://qichong-1256206693-1256206693.cos.ap-nanjing.myqcloud.com/upload/20210617/59156162f3ceb0cd81ba5c50a6c38dd5.png" mode="aspectFill"></image>
              <text>没有能让你喜欢的吗？只是随手一个赞...</text>
            </view>
          </view>
        </van-tab>
        <van-tab title="想买">
          <view class="Myactive_box padding_left_right" v-show="Myactive == 4">
            <view class="buy_box" v-for="(item,i) in marketItem" :key="i"
              @click="navTo('/subpkg/productdetails/productdetails?id=' + item.id)">
              <view class="buy_box_left">
                <view class="buy_box_left_img">
                  <image :src="item.previewImage" mode="aspectFill"></image>
                </view>
                <view class="buy_box_left_box">
                  <h1>{{item.productName}}</h1>
                  <view class="buy_box_left_box_text">
                    <text>{{item.category.categoryName}}</text>
                    <text class="Textmargin">｜</text>
                    <text>{{item.buyers}}人想买</text>
                  </view>
                </view>
              </view>
              <view class="buy_box_right">
                {{item.score}}
              </view>
            </view>

            <view class="Myactive_box_no" v-if="marketItem.length == 0">
              <image src="http://qichong-1256206693-1256206693.cos.ap-nanjing.myqcloud.com/upload/20210617/59156162f3ceb0cd81ba5c50a6c38dd5.png" mode="aspectFill"></image>
              <text>没有能让你动心的宠物吗？不要压抑自己的内心！</text>
            </view>
          </view>
        </van-tab>
      </van-tabs>
    </view>

  </view>
</template>

<script>
  import userIntroduced from '@/components/user_introduced/user_introduced.vue'
  import userMaomao from '@/components/user_maomao/user_maomao.vue'
  import userCircle from '@/components/user_circle/user_circle.vue'
  import {
    examineUserInfo,
    regardUserInfo,
    articleUserInfo,
    dynamicUserInfo,
    likeUserInfo,
    marketUserInfo,
    updatebrief
  } from '@/api/user.js'
  import {
    getattention
  } from '@/api/community.js'
  import {
    mapGetters
  } from 'vuex'
  export default {
    data() {
      return {
        Myactive: 0,
        // 参数
        query: {
          current: 1,
          size: 5,
          userId: 0,
        },
        // 用户数据
        userInfoItem: [],
        // 我的宠物
        petInfoItem: [],
        // 圈子
        circleInfoItem: [],
        articleList: [],
        // 文章数据
        articleItem: [],
        // 想要
        marketList: [],
        marketItem: [],
        // 瀑布流数据
        comList: [],
        // 简介
        usernameBrief: ''
      };
    },
    components: {
      userIntroduced,
      userMaomao,
      userCircle
    },
    computed: {
      ...mapGetters('m_user', ['userInfo'])
    },
    onLoad(option) {
      // this.Myactive = option.active ? option.active : 0
      this.query.userId = option.id
      examineUserInfo(this.query.userId).then(res => {
        // console.log(res)
        this.userInfoItem = res.data
      })
      regardUserInfo(this.query.userId).then(res => {
        // console.log(res)
        this.petInfoItem = res.data.animalList
        this.circleInfoItem = res.data.categoryList
      })
    },
    onReachBottom() {
      if (this.articleList.current * this.articleList.size >= this.articleList.total) return this.$util.Tips({
        title: '数据加载完毕！'
      });
      this.query.current++
      this.onarticleItem()
    },
    methods: {
      maxIcon() {
        uni.navigateBack()
      },
      onChangeMyactive(e) {
        this.articleItem = []
        this.marketItem = []
        this.Myactive = e.detail.index
        this.query.current = 1
        this.onarticleItem()
      },
      // 简介失焦
      usernameBlur(e) {
        // console.log(e)
        if (this.usernameBrief !== e.detail.value) {
          this.usernameBrief = e.detail.value
          updatebrief(this.usernameBrief).then(res => {
            // console.log(res)
          })
        }
      },
      onarticleItem() {
        if (this.Myactive == 1) {
          articleUserInfo(this.query).then(res => {
            res.data.records.forEach(item => {
              if (item.sliderImgs) {
                item.sliderImgs = item.sliderImgs.split(',')
              }
            })
            this.articleList = res.data
            this.articleItem = [...this.articleItem, ...res.data.records]
          })
        } else if (this.Myactive == 2) {
          dynamicUserInfo(this.query).then(res => {
            res.data.records.forEach(item => {
              if (item.sliderImgs) {
                item.sliderImgs = item.sliderImgs.split(',')
              }
            })
            this.articleList = res.data
            this.articleItem = [...this.articleItem, ...res.data.records]
          })
        } else if (this.Myactive == 3) {
          likeUserInfo(this.query).then(res => {
            res.data.records.forEach(item => {
              if (item.sliderImgs) {
                item.sliderImgs = item.sliderImgs.split(',')
              }
            })
            // console.log(res.data)
            this.articleList = res.data
            this.articleItem = [...this.articleItem, ...res.data.records]
          })
        } else if (this.Myactive == 4) {
          if (this.marketItem.current * this.marketItem.size >= this.marketItem.total) return this.$util.Tips({
            title: '数据加载完毕！'
          });
          marketUserInfo(this.query).then(res => {
            // console.log(res)
            res.data.records.forEach(item => {
              item.sliderImgs = item.sliderImgs.split(',')
            })
            this.marketList = res.data
            this.marketItem = [...this.marketItem, ...res.data.records]
          })
        }
      },
      onlikeShow(e) {
        // console.log(e)
        this.articleItem.forEach(item => {
          if (e.id == item.id) {
            item.isLiked = !e.isLiked
            if (item.isLiked) {
              item.likes += 1
            } else {
              if (item.likes > 0) {
                item.likes -= 1
              }
            }
          }
        })
      },
      // 关注
      onfollowed() {
        getattention(this.query.userId).then(res => {
          // console.log(res)
          this.userInfoItem.isFollowed = !this.userInfoItem.isFollowed
        })
      },
      onremoveShow(ids) {
        const index = this.articleItem.findIndex(item => item.id == ids)
        this.articleItem.splice(index, 1)
      },
      navTo(url) {
        uni.navigateTo({
          url: url
        })
      },
      onJoinerShow(Joiner) {
        // console.log(Joiner)
        circleInfoItem.forEach(item => {
          if (item.id == Joiner) {
            item.isJoined = true
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  page {

    // background-color: #5C8DFF;
    /deep/ .van-dialog__header {
      padding: 100rpx 0px !important;
    }

    /deep/ .van-popup {
      overflow: hidden;
    }

    /deep/ .van-tabs__nav {
      font-weight: 600;
    }

    // 关注
    .attention {
      padding: 2rpx 25rpx;
      background-color: rgba(253, 211, 56, 0.5);
      border-radius: 26.5rpx;
      color: rgba(51, 51, 51, 0.5);
      font-size: 26rpx;
      text-align: center;
      line-height: 52rpx;
    }

    // 未关注
    .attention1 {
      padding: 2rpx 25rpx;
      background-color: rgba(253, 211, 56, 1);
      border-radius: 26.5rpx;
      color: rgba(51, 51, 51, 1);
      font-size: 26rpx;
      text-align: center;
      line-height: 52rpx;
    }

    .concealshow {
      .van-cell {
        padding-left: 95rpx !important;
        height: 33.33% !important;

        .van-cell__title {
          font-size: 30rpx;
          line-height: 64rpx;
        }

        .iconfont {
          position: absolute;
          top: 50%;
          left: 40rpx;
          transform: translate(0, -50%);
          font-size: 36rpx;
        }
      }
    }

    .informshow {
      /deep/ .van-cell {
        height: 16% !important;

        /deep/ .van-cell__title {
          font-size: 34rpx;
          line-height: 64rpx;
        }
      }

      .informshow_float {
        position: absolute;
        top: 60rpx;
        left: 45rpx;
      }

      .informshow_return {
        text-align: center;
        padding: 53rpx 45rpx;
        font-size: 40rpx;
        // align-items: center;
        // justify-content: center;
        border-bottom: 1px solid rgba(241, 241, 241, 1);
      }
    }


    /deep/ .van-cell {
      align-items: center;

      /deep/ .van-cell__title {
        font-size: 34rpx;
        line-height: 64rpx;
      }
    }

    .padding_left_right {
      padding-left: 24rpx;
      padding-right: 24rpx;
      box-sizing: border-box;

      .my_pet_user_box {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .my_pet_user_box_left1 {
        width: 80%;
        height: 100%;
        display: flex;

        .image {
          height: 120rpx;
          width: 120rpx;
          border-radius: 50%;
        }

        .my_pet_user_title {
          width: 65%;
          position: relative;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          margin-left: 30rpx;
          height: 120rpx;
          // height: 100%;

          .my_pet_user_title_input {
            display: flex;
            align-items: center;
          }

          /deep/ .van-cell {
            padding: 0 !important;
          }

          /deep/ .van-cell::after {
            border: none !important;
          }

          /deep/ .van-field__body {
            // width: 350rpx;
            min-width: 100rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          /deep/ .van-field__input {
            color: rgba(61, 61, 61, 0.6);
            font-size: 24rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          h1 {
            color: rgba(61, 61, 61, 1);
            font-size: 40rpx;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
          }

          text {
            color: rgba(61, 61, 61, 0.5);
            font-size: 24rpx;
          }

          .minImage {
            // position: absolute;
            width: 24rpx;
            height: 24rpx;
          }
        }
      }
    }

    /deep/.uni-scroll-view ::-webkit-scrollbar {
      /* 隐藏滚动条，但依旧具备可以滚动的功能 */
      display: none;
      width: 0;
      height: 0;
      color: transparent;
      background: transparent;
    }

    /deep/::-webkit-scrollbar {
      display: none;
      width: 0;
      height: 0;
      color: transparent;
      background: transparent;
    }

    /deep/ .van-tabs__content {
      overflow: initial;
    }

    /deep/ .van-tab {
      flex: none !important;
      -webkit-flex: none !important;
      padding: 0 55rpx 0 10rpx !important;
      color: rgba(61, 61, 61, 0.5) !important;
    }

    /deep/ .van-tabs__wrap::after {
      border: none;
    }

    /deep/ .van-tabs__wrap {
      padding: 0 24rpx;
    }

    /deep/ .van-tabs__line {
      width: 40rpx !important;
      height: 8rpx;
      background-color: rgba(253, 211, 56, 1);
      border-radius: 78rpx;
      left: -6px !important;
    }

    /deep/ .van-ellipsis {
      // font-weight: bold;
      font-size: 32rpx;
      // color: rgba(61, 61, 61, 0.5);
    }

    /deep/ .van-tab--active {
      font-weight: bold;
    }

    /deep/ .van-tab--active {
      color: rgba(0, 0, 0, 1) !important;
    }

    .container {
      border: none !important;

      .maxImage {
        position: relative;
        width: 100%;
        height: 300rpx !important;
        overflow: hidden;

        .Image {
          width: 100%;
          filter: blur(22.2rpx);
        }

        .maxIcon {
          position: fixed;
          z-index: 1;
          top: 66rpx;
          left: 24rpx;
          font-size: 48rpx;
          color: #fff;
        }

        .maxback {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.3);
        }
      }

      .userInfo {
        position: relative;
        z-index: 10;
        margin-top: -60rpx;
        padding: 40rpx 0;
        background-color: #fff;
        border-top-left-radius: 50rpx;
        border-top-right-radius: 50rpx;
        border-bottom-right-radius: 0px;
        border-bottom-left-radius: 0px;

        .my_pet_user_box {
          height: 120rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .my_pet_user_box_right {}
        }

        .gender_Info {
          position: absolute;
          top: 120rpx;
          left: 105rpx;
          width: 40rpx;
          height: 40rpx;
          border-radius: 50%;
          overflow: hidden;
          box-sizing: border-box;
          border: 2px solid #fff;
        }

        .community {
          padding: 50rpx 0 60rpx 0;
          display: flex;
          // justify-content: space-around;
          align-items: center;

          .community_box {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin: 0 58rpx;

            h1 {
              font-weight: bold;
              color: rgba(61, 61, 61, 1);
              font-size: 44rpx;
            }

            text {
              margin-top: 5rpx;
              color: rgba(61, 61, 61, 0.6);
              font-size: 28rpx;
            }
          }
        }

        .Myactive_box_flex {
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
        }

        .Myactive_box {
          padding-top: 30rpx;
          width: 100%;

          // 文章
          .article_box {
            width: 340rpx;
            height: 381rpx;
            // background-color: #4CD964;
            margin-bottom: 30rpx;

            .article_box_img {
              width: 340rpx;
              height: 232rpx;
              overflow: hidden;
              border-radius: 10rpx;

              image {
                width: 100%;
                height: 100%;
              }
            }

            .article_box_title {
              margin-top: 16rpx;
              color: rgba(61, 61, 61, 1);
              font-size: 26rpx;
              line-height: 45rpx;
              font-weight: bold;
            }

            .article_box_give {
              color: rgba(61, 61, 61, 0.5);
              font-size: 22rpx;
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-top: 10rpx;

              .minImage {
                width: 22rpx;
                margin-right: 10rpx;
              }

              .article_box_give_right {
                display: flex;
                // justify-content: space-between;
                align-items: center;
              }
            }
          }

          // 动态
          .my_pet_function {
            margin-top: 45rpx;
            display: flex;
            justify-content: space-between;

            image {
              width: 42rpx;
              height: 42rpx;
            }

            .my_pet_share {
              display: flex;
              align-items: center;
              color: rgba(61, 61, 61, 0.8);
              font-size: 24rpx;

              text {
                margin-left: 12rpx;
              }
            }
          }

          // 想买
          .buy_box {
            height: 160rpx;
            border: 1px solid rgba(61, 61, 61, 0.1);
            border-radius: 16rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 33rpx;
            margin-bottom: 24rpx;

            .buy_box_left {
              display: flex;

              .buy_box_left_img {
                width: 94rpx;
                height: 94rpx;
                border-radius: 50%;
                overflow: hidden;

                image {
                  width: 100%;
                  height: 100%;
                }
              }

              .buy_box_left_box {
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                margin-left: 17rpx;

                h1 {
                  color: rgba(61, 61, 61, 1);
                  font-size: 30rpx;
                }

                .buy_box_left_box_text {
                  color: rgba(61, 61, 61, 0.6);
                  font-size: 22rpx;

                  .Textmargin {
                    margin: 0 10rpx;
                  }
                }
              }
            }

            .buy_box_right {
              color: rgba(255, 102, 102, 1);
              font-size: 44rpx;
              font-weight: bold;
            }
          }

          .Myactive_box_no1 {
            margin-top: 165rpx !important;
          }

          .Myactive_box_no {
            // height: 300rpx;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin-top: 200rpx;

            image {
              width: 264rpx;
              height: 260rpx;
            }

            text {
              color: rgba(61, 61, 61, 0.5);
              font-size: 26rpx;
              margin-top: 30rpx;
            }
          }
        }
      }
    }

    // 喜欢
    .pubuItem {
      column-count: 2;
      column-gap: 20rpx;
    }

    .item-masonry {
      box-sizing: border-box;
      border-radius: 15rpx;
      // overflow: hidden;
      // background-color: #FFD01E;
      break-inside: avoid;
      /*避免在元素内部插入分页符*/
      box-sizing: border-box;
      margin-bottom: 20rpx;
      // box-shadow: 0px 0px 28rpx 1rpx rgba(78, 101, 153, 0.14);
    }

    .item-masonry image {
      width: 100%;
      border-radius: 10rpx;
      overflow: hidden;
    }

    .article_box_img_i {
      // width: 340rpx;
      height: 510rpx;
    }

    .article_box_img_i1 {
      height: 232rpx;
    }

    .listtitle {
      font-size: 24rpx;
      padding-bottom: 22rpx;
      padding-top: 22rpx;

      .listtitle1 {
        // line-height: 39rpx;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        min-height: 39rpx;
        max-height: 78rpx;
        font-size: 26rpx;
        line-height: 40rpx;
        margin: 0rpx 0 18rpx;
      }

      .article_box_give {
        color: rgba(61, 61, 61, 0.5);
        font-size: 22rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 10rpx;

        .minImage {
          width: 22rpx;
          margin-right: 10rpx;
          border-radius: initial;
        }

        .article_box_give_right {
          display: flex;
          // justify-content: space-between;
          align-items: center;
        }
      }
    }

    .Index {
      width: 100%;
      height: 100%;
    }
  }
</style>
